<template>
	<div>
		<div class="head">
			<a @click="$router.push('/SD')" class="return"></a>
			释放记录
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div style="background-color: rgb(57, 82, 137);margin-top: 20px;text-align: left;">
							<van-row class="chi" gutter="20" v-for="item in list" :key="item.id">
								<van-col span="10" v-text="item.createTime" style="line-height: 20px;padding: 10px 0px;font-size: 13px;">2019/05/16 09:54:07</van-col>
								<van-col span="14" style="color:#00dd94;line-height: 20px;padding-top: 10px;padding-bottom: 10px;">
									<span v-text="item.releaseDesc"></span>
									<span>:</span>
									<span v-text="Number(item.releaseNum).toFixed(2) + ' ADDC'"></span>
								</van-col>
							</van-row>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { home } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				list: [], // 释放记录
				size: 10, //每页数量
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			
		},
		methods: {
			getRelease() {
				home.getReleaseRecord({
					current: 1,
					size: this.size,
					joinRecordId: this.$route.query.type
				}).then(res => {
					this.list = res.data.records;
				})
			},
			onRefresh() { // 下拉刷新
				this.getRelease()
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getRelease()
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		}
	}
</script>

<style scoped lang="less">
	.head~.overlay {
		top: 44px;
		background: #1A2E58;
	}
	
	.chi {
		border-bottom: 1px solid #1a2e58;
		font-size: 15px;
		padding-left: 20px;
	}
	
	.chi:last-child {
		border-bottom: 0;
	}
	
	/deep/ .van-ellipsis {
		font-size: 16px;
	}
</style>